﻿/*
 * animation动画
 * 
 * myAnimation:调用动画的名称
 * @keyframes:规定动画
 * time:2s设定时间
 * linear:匀速
 * infinite:无限循环
 * alternate:逆向运动
 */
.downloading{
	display:block;
	animation: myAnimation 1s linear infinite;
	/*适配浏览器*/
	-moz-animation: myAnimation 1s linear infinite;/* Firefox */	
	-webkit-animation: myAnimation 1s linear infinite;/* Safari and Chrome */
	-o-animation: myAnimation 1s linear infinite;/* Opera */
}

@keyframes myAnimation {
	0% {background: url(images/public/bus1.png) no-repeat;background-size: 100%; background-position: center}
	5% {background: url(images/public/bus2.png) no-repeat;background-size: 100%; background-position: center}
	30% {background: url(images/public/bus3.png) no-repeat;background-size: 100%; background-position: center}
	15% {background: url(images/public/bus4.png) no-repeat;background-size: 100%; background-position: center}
	30% {background: url(images/public/bus5.png) no-repeat;background-size: 100%; background-position: center}
	25% {background: url(images/public/bus6.png) no-repeat;background-size: 100%; background-position: center}
	30% {background: url(images/public/bus7.png) no-repeat;background-size: 100%; background-position: center}
	35% {background: url(images/public/bus8.png) no-repeat;background-size: 100%; background-position: center}
	40% {background: url(images/public/bus9.png) no-repeat;background-size: 100%; background-position: center}
	45% {background: url(images/public/bus10.png) no-repeat;background-size: 100%; background-position: center}
	50% {background: url(images/public/bus11.png) no-repeat;background-size: 100%; background-position: center}
	55% {background: url(images/public/bus12.png) no-repeat;background-size: 100%; background-position: center}
	60% {background: url(images/public/bus13.png) no-repeat;background-size: 100%; background-position: center}
	65% {background: url(images/public/bus14.png) no-repeat;background-size: 100%; background-position: center}
	70% {background: url(images/public/bus15.png) no-repeat;background-size: 100%; background-position: center}
	75% {background: url(images/public/bus16.png) no-repeat;background-size: 100%; background-position: center}
	80% {background: url(images/public/bus17.png) no-repeat;background-size: 100%; background-position: center}
}

/* Firefox */
@-moz-keyframes myAnimation {
	0% {background: url(images/public/bus1.png) no-repeat;background-size: 100%; background-position: center}
	6% {background: url(images/public/bus2.png) no-repeat;background-size: 100%; background-position: center}
	12% {background: url(images/public/bus3.png) no-repeat;background-size: 100%; background-position: center}
	18% {background: url(images/public/bus4.png) no-repeat;background-size: 100%; background-position: center}
	25% {background: url(images/public/bus5.png) no-repeat;background-size: 100%; background-position: center}
	31% {background: url(images/public/bus6.png) no-repeat;background-size: 100%; background-position: center}
	37% {background: url(images/public/bus7.png) no-repeat;background-size: 100%; background-position: center}
	43% {background: url(images/public/bus8.png) no-repeat;background-size: 100%; background-position: center}
	50% {background: url(images/public/bus9.png) no-repeat;background-size: 100%; background-position: center}
	56% {background: url(images/public/bus10.png) no-repeat;background-size: 100%; background-position: center}
	62% {background: url(images/public/bus11.png) no-repeat;background-size: 100%; background-position: center}
	68% {background: url(images/public/bus12.png) no-repeat;background-size: 100%; background-position: center}
	75% {background: url(images/public/bus13.png) no-repeat;background-size: 100%; background-position: center}
	81% {background: url(images/public/bus14.png) no-repeat;background-size: 100%; background-position: center}
	87% {background: url(images/public/bus15.png) no-repeat;background-size: 100%; background-position: center}
	93% {background: url(images/public/bus16.png) no-repeat;background-size: 100%; background-position: center}
	100% {background: url(images/public/bus17.png) no-repeat;background-size: 100%; background-position: center}
}

/* Safari and Chrome */
@-webkit-keyframes myAnimation {
	0% {background: url(images/public/bus1.png) no-repeat;background-size: 100%; background-position: center}
	6% {background: url(images/public/bus2.png) no-repeat;background-size: 100%; background-position: center}
	12% {background: url(images/public/bus3.png) no-repeat;background-size: 100%; background-position: center}
	18% {background: url(images/public/bus4.png) no-repeat;background-size: 100%; background-position: center}
	25% {background: url(images/public/bus5.png) no-repeat;background-size: 100%; background-position: center}
	31% {background: url(images/public/bus6.png) no-repeat;background-size: 100%; background-position: center}
	37% {background: url(images/public/bus7.png) no-repeat;background-size: 100%; background-position: center}
	43% {background: url(images/public/bus8.png) no-repeat;background-size: 100%; background-position: center}
	50% {background: url(images/public/bus9.png) no-repeat;background-size: 100%; background-position: center}
	56% {background: url(images/public/bus10.png) no-repeat;background-size: 100%; background-position: center}
	62% {background: url(images/public/bus11.png) no-repeat;background-size: 100%; background-position: center}
	68% {background: url(images/public/bus12.png) no-repeat;background-size: 100%; background-position: center}
	75% {background: url(images/public/bus13.png) no-repeat;background-size: 100%; background-position: center}
	81% {background: url(images/public/bus14.png) no-repeat;background-size: 100%; background-position: center}
	87% {background: url(images/public/bus15.png) no-repeat;background-size: 100%; background-position: center}
	93% {background: url(images/public/bus16.png) no-repeat;background-size: 100%; background-position: center}
	100% {background: url(images/public/bus17.png) no-repeat;background-size: 100%; background-position: center}
}

/* Opera */	
@-o-keyframes myAnimation {
	0% {background: url(images/public/bus1.png) no-repeat;background-size: 100%; background-position: center}
	6% {background: url(images/public/bus2.png) no-repeat;background-size: 100%; background-position: center}
	12% {background: url(images/public/bus3.png) no-repeat;background-size: 100%; background-position: center}
	18% {background: url(images/public/bus4.png) no-repeat;background-size: 100%; background-position: center}
	25% {background: url(images/public/bus5.png) no-repeat;background-size: 100%; background-position: center}
	31% {background: url(images/public/bus6.png) no-repeat;background-size: 100%; background-position: center}
	37% {background: url(images/public/bus7.png) no-repeat;background-size: 100%; background-position: center}
	43% {background: url(images/public/bus8.png) no-repeat;background-size: 100%; background-position: center}
	50% {background: url(images/public/bus9.png) no-repeat;background-size: 100%; background-position: center}
	56% {background: url(images/public/bus10.png) no-repeat;background-size: 100%; background-position: center}
	62% {background: url(images/public/bus11.png) no-repeat;background-size: 100%; background-position: center}
	68% {background: url(images/public/bus12.png) no-repeat;background-size: 100%; background-position: center}
	75% {background: url(images/public/bus13.png) no-repeat;background-size: 100%; background-position: center}
	81% {background: url(images/public/bus14.png) no-repeat;background-size: 100%; background-position: center}
	87% {background: url(images/public/bus15.png) no-repeat;background-size: 100%; background-position: center}
	93% {background: url(images/public/bus16.png) no-repeat;background-size: 100%; background-position: center}
	100% {background: url(images/public/bus17.png) no-repeat;background-size: 100%; background-position: center}
}